import styles from './index.module.scss'
import { videoScreenFull } from '../../store'
import { useRecoilValue } from 'recoil'
import { Broadcast, Tooltip } from '../../components'
import { useVideo } from '../../utils'

const Index = () => {
  const isScreenFull = useRecoilValue(videoScreenFull)
  const { toggleFullScreen } = useVideo()

  return (
    <Tooltip
      className={styles['multifunction-fullscreen']}
      title={isScreenFull ? '关闭全屏' : '全屏'}
      icon={
        <Broadcast
          iconClass={!isScreenFull ? 'fullScreen' : 'closeFullScreen'}
          fontSize={isScreenFull ? '10px' : '20px'}
          onClick={toggleFullScreen}
          className={styles['hover-icon-animate']}
        />
      }
    />
  )
}

export default Index
